<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jquery测试页面</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
		<style>
			.red{
				color:red;
			}
		</style>
	</head>
	<body>
		<h3>This is jquery test page</h3>
		<div class="outDiv">
			<p>
				<div id="div01" class="myDiv"><span>第一个DIV</span></div>
			</p>
			<p>
				<div id="div02" name="div02" class="myDiv">第二个DIV</div>
			</p>
			<p>
				<input type="hidden" name="userID" value="1"/>
			</p>
			<p>
				<input type="checkbox" name="myLove" value="love1"/>爱好1
				<input type="checkbox" name="myLove" value="love2"/>爱好2
				<input type="text" name="myInput" value="hanzhengyan"/>
			</p>
		</div>

		<form id=myform action="javascript:void(0);" method="post">
			<!--隐藏框-->
			<input type="hidden" id="userId" name="userId" value="1" />
			<!--单行文本框-->
			<p>
				<label for="userName">用户名</label>
				<input type="text" id="userName" name="userName" value="hanzhengyan"/>
			</p>
			<!--密码框-->
			<p>
				<label for="password">密码</label>
				<input type="password" id="password" name="password" value="11111"/>
			</p>
			<p>
				<input type="hidden" name="cityId" value="11890"/>
			</p>
			<p>
				<input type="text" name="cityName" value="shanghai" readonly/>
			</p>
			<p>
				<input type="text" name="localCityName" value="上海"/>
			</p>
			<button onclick="fun01()">but1</button>
			<button id="but02">but02</button>
			<button id="but03">新增用户</button>
			<button id="but04">修改城市</button>
		</form>
		
			

		<script>
			// 页面加载时执行的函数
			$(function () {
				jqueryTest01();
				$("#but02").on("click",function(){
					fun02();
				});
				$("#but03").on(function(){
					insertUser();
				});
				$("#but04").on(function(){
					updateCity();
				});
			});


			function fun01(){
				alert("adadsaf");
			}
			function fun02(){
				location.href = "http://www.baidu.com";
			}

			function updateCity(){
				$.ajax({
					url:"http://www.sfac.xyz/api/city",
					type:"put",
					data:$("#myform").serializeArray(),
					success:function(result){
						if (result.status == 200){
							alter(result.message);
							console.log(result.data);
						}else{
							alter(result.message);
						}
					},
					error:function(erro){
						console.log("error");
					}
				});

			}

			function insertUser(){
				var user = {};
				user.userName = $("#userName").val();
				user.password = $("#password").val();

				// 调用ajax函数，参数为ajax的配置属性对象
				$.ajax({
					url:"http://www.sfac.xyz/api/user",
					type:"post",
					contentType:"application/json",
					data:JSON.stringify(user),
					success:function(result){
						if (result.status == 200){
							alter(result.message);
							console.log(result.data);
						}else{
							alter(result.message);
						}
					},
					error:function(erro){
						console.log("error");
					}
				});
			}

			function jqueryTest01() {
				console.log($ == jQuery);

				// 选择器
				console.log($("#div01"));
				console.log($("#div01").html());
				console.log($("div"));
				console.log($(".myDiv"));
				console.log($("[name=div02]"));
				// div01显示隐藏域里面的值
				// $("#div01").html($("input[name=userID]").val())
				//层级选择器
				console.log($("div.outDiv p input").val());
				// 过滤器
				console.log($("input:hidden").val());
				console.log($("#div01").text());
				console.log($("#div01").html());
				$("#div01").html("我爱你！中国，<span style='color:red'>我想给你过一次浓烈的生日！</span>");

				//$("#div02").css("color","red");
				$('#div02').addClass("red");

				//属性操作
				console.log($(window).width());
				console.log($(window).height());
				console.log($(document).width());
				console.log($(document).height());
				$("#div01").css("width","400px")
						   .css("height","50px").css("border","solid 1px gray");
				console.log($("#div01").width());
				console.log($("#div01").height());

				// 属性添加
				$("#div01").attr("data","hanzhengyan");

				$("input[type=checkbox][value=love1]").attr("checked","checked");
				$("input[type=checkbox][value=love2]").prop("checked","checked");
				

				console.log($("[name=myLove]").attr("value"));
				console.log($("input[type=checkbox][value=love1]").attr("checked"));
				console.log($("input[type=checkbox][value=love1]").prop("checked"));

				// 结构操作
				$("#div01").append("<span style='color:blue'>!!!!</span>")

				// 循环list
				var arr = ["cadsf",241,"aa",341];
				$.each(arr,function(i,item){
					console.log(i+"---"+item);
				});

				// 序列化form表单
				console.log($("#myform").serializeArray());
				var user = {
					userId:1,
					userName:"hanzhengyan",
					password:"11111",
				};
				console.log(JSON.stringify(user));

			}
		</script>
	</body>
</html>
